<template>
  <div id="WareHouse">
    <div style="display: flex; align-items: center; justify-content: space-between;">
    <el-form :inline="true" class="filter-form" style="width:800px;">
      <el-form-item label="商品">
        <el-select v-model="filter.product" placeholder="请选择商品"></el-select>
      </el-form-item>
      <el-form-item label="货架或备注">
        <el-input v-model="filter.shelfNote" placeholder="请输入货架或备注"></el-input>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="filter.showDisabled">显示禁用货架</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>

    <div class="action-buttons" style="display: flex; gap: 10px;">
      <el-button type="primary" @click="handleAdd">新增</el-button>
  <el-dialog
  title="新增商品货架"
  :visible.sync="dialogVisibled"
  width="40%">
  <el-form>
    <el-form-item label="商品" >
      <el-select  placeholder="请选择">
        <!-- 商品选项 -->
      </el-select>
    </el-form-item>
    
    <el-form-item label="仓库" >
      <el-select  placeholder="请选择">
        <el-option label="默认仓库" value="default"></el-option>
        <!-- 其他仓库选项 -->
      </el-select>
    </el-form-item>
    
    <el-form-item label="货区">
      <el-input></el-input>
    </el-form-item>
    
    <el-form-item label="货架名称" >
      <el-input  placeholder="例：1-1-1"></el-input>
    </el-form-item>
    
    <el-form-item label="备注" >
      <el-input ></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibled = false">取消</el-button>
    <el-button type="primary" @click="saveShelf">确定</el-button>
  </div>
</el-dialog>
      <el-button type="success" @click="handlePrintLabels">打印货架标签</el-button>
      <el-button type="warning" @click="handleDisable">禁用</el-button>
      <el-button type="danger" @click="handleDelete">删除</el-button>
      <el-button type="primary" @click="handleImport">导入</el-button>
      <el-button type="primary" @click="handleExport">导出</el-button>
      <el-button type="info" @click="handleExport">修改</el-button>
    </div>
</div>
<div style="height:600px;width:2000px;"> 
    <el-row style="margin-top: 1%" :gutter="20">
      <!-- 左侧 仓库列表 -->
     <el-col style="height: 350px;" :span="span" :class="[span != '8' ? 'span1' : 'span1']">
  <div style="position: relative; width: 100%; height: 100%">
    <el-drawer
      class="drawerClass"
      style="position: absolute"
      :append-to-body="false"
      :modal="false"
      :show-close="false"
      :wrapperClosable="false"
      size="100%"
      :visible.sync="drawer"
      direction="ltr"
    >
      <el-card class="box-card" style="position: relative;height:500px">
        <div>品牌分类
          <el-select
            v-model="selectedBrand"
            placeholder="请选择品牌"
            style="width: 100%; max-width: 300px;"
          >
            <el-option
              v-for="brand in brandData"
              :key="brand.id"
              :label="brand.label"
              :value="brand.id"
            ></el-option>
          </el-select>
        </div>
      </el-card>
    </el-drawer>
    <div
      style="
        position: absolute;
        z-index: 999999999;
        cursor: pointer;
        top: 30%;
        right: 10px;
      "
      :class="[drawer ? 'toggle-text' : 'toggle-text']"
      @click="clickImg"
    >
      <span v-show="!drawer">></span>
      <span v-show="drawer"><</span>
    </div>
  </div>
</el-col>
<!-- 右侧 用户列表 -->
<el-col :span="span1" :class="[span1 != '15' ? 'span1' : 'span1']">
  <el-card class="box-card" style="height:500px">
    <div>品牌分页
      <el-table
        :data="brandList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        ></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="mini" @click="editBrand(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteBrand(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="品牌编号" width="180"></el-table-column>
        <el-table-column prop="name" label="品牌名称" width="180"></el-table-column>
        <el-table-column label="状态" width="180">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" @change="handleStatusChange(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="备注" width="180"></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="100">
      </el-pagination>
    </div>
  </el-card>
</el-col>
    </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WareHouse',
  data() {
    return {
      filter: {
        product: '',
        shelfNote: '',
        showDisabled: false
      },
      dialogVisibled: false,
      dialogVisible: false,
      dialogForm: {
        product: '',
        warehouse: '默认仓库',
        area: '',
        shelfName: '',
        remarks: ''
      },
      span: 1,  // 初始值设为 1，表示收缩状态
      span1: 23,
      drawer: false,  // 初始值设为 false，表示仓库列表是收缩的
      productList: [],  // 商品列表数据
      currentPage: 1,  // 当前页码
      selectedWarehouse: null,
      warehouseData: [
        { id: 'CK001', label: '默认仓库' },
        { id: 'CK002', label: '冷藏库' },
        { id: 'CK003', label: '食品库' },
        // ...更多仓库数据
      ],
      handleNodeClick(data) {
        this.selectedWarehouseId = data.id;
        this.fetchProductsByWarehouse(this.selectedWarehouseId);
      },
      fetchProductsByWarehouse(warehouseId) {
        // 根据仓库ID获取商品列表逻辑
        // 模拟数据
        this.productList = [
          { date: '2024-01-01', name: '商品1', address: '地址1' },
          { date: '2024-01-02', name: '商品2', address: '地址2' }
        ];
      },
      selectedWarehouseId: null,  // 选中的仓库ID
    };
  },
  methods: {
   clickImg() {
    this.drawer = !this.drawer;
    if (this.drawer) {
      this.span = 6;
      this.span1 = 18;
    } else {
      this.span = 1;
      this.span1 = 23;
    }
  },
    handleAdd() {
      this.dialogVisibled = true;
    },
    handleDialogConfirm() {
      console.log('提交的表单数据:', this.dialogForm);
      this.dialogVisible = false;
      this.resetDialogForm();
    },
    resetDialogForm() {
      this.dialogForm = {
        product: '',
        warehouse: '默认仓库',
        area: '',
        shelfName: '',
        remarks: ''
      };
    },
    handleSizeChange(newSize) {
      // 分页每页显示数量变化
      console.log('每页显示数量:', newSize);
      this.pageSize = newSize;
    },
    handleCurrentChange(newPage) {
      // 分页当前页变化
      console.log('当前页码:', newPage);
      this.currentPage = newPage;
    },
    handleSelectionChange(selectedRows) {
      // 表格选中行变化
      console.log('选中的行:', selectedRows);
    },
    handleEdit(index, row) {
      // 编辑商品
      console.log('编辑商品:', row);
    },
    handleDelete(index, row) {
      // 删除商品
      console.log('删除商品:', row);
    },
    handlePrintLabels() {
      // 打印货架标签
      console.log('打印货架标签');
    },
    handleDisable() {
      // 禁用货架
      console.log('禁用货架');
    },
    handleImport() {
      // 导入数据
      console.log('导入数据');
    },
    handleExport() {
      // 导出数据
      console.log('导出数据');
    }
  }
};
</script>
<style>
.toggle-text {
  font-size: 16px;
  color: #409eff;
}
.full-height {
  height: 100vh;
}
.action-buttons {
  position: relative;
  bottom: 20px;
  float: right;
  margin: 20px 0;
}
.action-buttons .el-button {
  margin-right: 10px;
}
</style>
